11 Babel-loader, a ponte entre o Webpack e o Babel

A ponte de ligação entre o Webpack e o babel-core é o babel-loader (https://github.com/babel/babel-loader), um carregador exclusivo voltado para o Babel. Esse loader lerá nossas configurações em client/.babelrc quando for executado.

Vamos instalar o loader através do terminal:

npm install babel-loader@7.1.0 --save-dev

Isso ainda não é suficiente, precisamos fazer com que client/webpack.config.js utilize o loader que acabamos de baixar. Fazemos isso adicionando a configuração module. Dentro de module, podemos ter várias rules (regras), e cada regra pode usar um módulo específico quando aplicada.

Alterando nosso arquivo client/webpack.config.js:

// client/webpack.config.js

const path = require('path');
module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
}

Por enquanto, temos apenas uma regra. A propriedade test indica a condição na qual nosso loader será aplicado. Usamos a expressão regular /\.js$/ para considerar todos os arquivos que terminam com a extensão .js. Durante este processo, excluímos a pasta node_modules, pois não faz sentido processar os arquivos dela. Por fim, dentro de use, indicamos o loader que será utilizado, em nosso caso o babel-loader.

Agora já podemos tentar executar mais uma vez nosso processo de build através do terminal:

npm run build-dev

E mais uma vez, recebemos um aviso nele:

Hash: b9e23a2ce60c22bf8d05
Version: webpack 3.0.0
Time: 286ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.87 kB       0  [emitted]  main
   [0] ./app-src/app.js 1.38 kB {0} [built] [1 warning]

WARNING in ./app-src/app.js
System.register is not supported by webpack.

O que será que foi dessa vez?

Quando usamos System.js, configuramos o client/.babelrc para transcompilar nossos módulos com um padrão compatível com o loader. Contudo, esse formato não é suportado pelo Webpack. A boa notícia é que, a partir da sua versão 2.0, Webpack já suporta por padrão o sistema de módulos do ES2015 (ES6). Dessa forma, não precisamos mais do módulo babel-plugin-transform-es2015-modules-systemjs e podemos removê-lo. Além disso, também podemos atualizar client/.babelrc para não fazer mais uso do plugin.

Removendo o módulo via npm:

npm uninstall babel-plugin-transform-es2015-modules-systemjs --save-dev

Agora, precisamos alterar client/.babelrc. Em plugins, deixaremos apenas o transform-decorators-legacy:

// client/.babelrc
{
    "presets":["es2017"],
    "plugins" : ["transform-decorators-legacy"]
}

Agora podemos gerar o build do nosso projeto que ele vai até o final, sem problema algum:

npm run build-dev

Dentro da pasta client/dist, foi gerado o arquivo bundle.js. É um arquivo que contém todos os módulos usados pela aplicação concatenados.

Mesmo ainda sem um servidor rodando, se abrirmos client/index.html diretamente no navegador, nossa aplicação continuará funcionando.

Aprendemos a realizar um build de desenvolvimento, mas minificar scripts em ambiente de produção é uma boa prática. Aliás, ainda não temos uma separação clara entre esses dois ambientes. Chegou a hora de botar a casa em ordem.